<template>
	<view class="banner">
		<view class="my_top">
			<view class="my_top1">
				<image class="image1" src="../../static/logo.png"></image>
       <image class="image2" src="/static/logo1.jpg"></image>
			</view>
		</view>
		<view class="my_icon">
		<view @click="goAddress">
		<uni-icons type="location" size="25"></uni-icons>
		<span class="city_sty">{{city}}</span>
		</view>
			<view class="my_inputs">
				<uni-icons type="search" size="30" class="my_search"></uni-icons>
				<input type="text" placeholder="搜索品牌,车型"/>
			</view>
		</view>
		<!-- style-type="'button'"中有 text和button两种风格 -->
		<view class="uni-padding-wrap ">
			<uni-segmented-control :current="currentItem" :values="items" :style-type="'text'" :active-color="'#007aff'"
			 @clickItem="onClickItem"/>
		</view>

		<view class="content">
			<!-- 选项卡1的内容 -->
			<view v-if="currentItem === 0">
				<shouye></shouye>
			</view>
			<!-- 选项卡2的内容 -->
			<view v-if="currentItem === 1">
			   <secondhand></secondhand>
			</view>
			<!-- 选项卡3的内容 -->
			<view v-if="currentItem === 2">
				<newcar></newcar>
			</view>
			<view v-if="currentItem === 3">
				<buycar></buycar>
			</view>
			<view v-if="currentItem === 4">
				<fuwu></fuwu>
			</view>
		</view>
	</view>
</template>

<script>
	import shouye from "../../commonts/shouye/shouye.vue";
	import secondhand from "../../commonts/secondhand/secondhand.vue";
	import newcar from "../../commonts/newcar/newcar.vue";
	import buycar from "../../commonts/buycar/buycar.vue";
	import fuwu from "../../commonts/fuwu/fuwu.vue";
	export default {
		components:{
			shouye,
			secondhand,
			newcar,
			buycar,
			fuwu,
		},// 2. 注册组件
		data() {
			return {
				items: ['首页', '二手车', '新车',"卖车","腾发服务"],
				currentItem: 0,
				city:"全国",
			}
		},
		onShow(){
			uni.getStorage({
				key:'storage_key',
				success: (res)=> {
					// console.log(res.data);
					this.city =res.data
					console.log(this.city);
					//清除本地数据缓存
					uni.clearStorage();

				}
			});
		},
		methods: {
			onClickItem(e) {
				if (this.currentItem !== e.currentIndex) {
					this.currentItem = e.currentIndex
				}
			},
			// 跳转到地址选择页面
			goAddress(){
				uni.navigateTo({
					url:"/pages/address/address"
				})
			}
		}
	}
</script>

<style>
	/* 头条小程序组件内不能引入字体 */

	.uni-padding-wrap {
		padding: 0rpx 10rpx;
		margin-left: 80rpx;
	}

	.content {
		justify-content: space-between;
		margin-top: 140rpx;
	}

	.content-text {
		font-size: 18px;
		color: #333;
	}
	.banner{
		width: 750rpx;
		box-sizing: border-box;
	}
	.my_top1{
		position: absolute;
		top: 15rpx;
		left: 15rpx;
	}
	.my_top .image1{
		width: 80rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
	}
	.my_top .image2{
		width: 80rpx;
		height: 20rpx;
		position: absolute;
		left: 0;
		top: 42rpx;
	}
	.my_icon{
		padding: 15rpx 0rpx;
		width: 750rpx;
		height: 80rpx;
		position: absolute;
        top:80rpx;
		display: flex;
		justify-content: flex-start;
	}
	.my_inputs{
		background-color: #ccc;
		margin-left: 50rpx;
		border-radius:30rpx;
	}
	.my_inputs .my_search{
		position: absolute;
			left:220rpx;
			top: 25rpx;
	 }
	.my_inputs input{
		width:500rpx;
		height: 80rpx;
		line-height:80rpx;
		text-align: center;
	}
	.city_sty{
		display:inline-block;
		width: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
	}
</style>
